<!-- 自定义tabber -->
<template>
	<view class="tabbar-wrap">
		<!-- 首页 Tab：动态切换 未选中/选中 图标 -->
		<view class="tab-item" :class="active==='home'?'active':''" @click="go('home')">
			<image class="icon"
				:src="active === 'home' ? '/static/index/@2x_home.png' : '/static/index/@2x_home_line.png'"
				mode="aspectFit" />
			<text>首页</text>
		</view>

		<!-- 救援 Tab：中间凸起，同样支持图标切换 -->
		<view class="center-item" @click="go('rescue')">
			<view class="center-circle">
				<image class="center-icon"
					:src="active === 'rescue' ? '/static/Rescue/示警.png' : '/static/Rescue/示警@3x.png'"
					mode="aspectFit" />
			</view>
			<text class="center-text" :class="active==='rescue'?'active':''">救援</text>
		</view>

		<!-- 我的 Tab：动态切换 未选中/选中 图标 -->
		<view class="tab-item" :class="active==='my'?'active':''" @click="go('my')">
			<image class="icon" :src="active === 'my' ? '/static/index/@2x_my.png' : '/static/index/@2x_my_line.png'"
				mode="aspectFit" />
			<text>我的</text>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps
	} from 'vue'

	// 接收父组件传递的当前激活 Tab 标识
	const props = defineProps({
		active: {
			type: String,
			default: 'home' // 默认激活首页
		}
	})

	// Tab 跳转逻辑（保持原有，优化路径规范）
	function go(key) {
		switch (key) {
			case 'home':
				uni.reLaunch({
					url: '/pages/index/index'
				}); // 首页用 reLaunch 重置页面栈
				break;
				// #ifdef H5
			case 'rescue':
				uni.switchTab({
					url: '/pages/Rescue/Rescue'
				});
				break;
				// #endif
				// #ifdef MP
			case 'rescue':
				uni.navigateTo({
					url: '/pages/Rescue/Rescue'
				});
				break;
				// #endif

				// #ifdef H5
			case 'my':
				uni.switchTab({
					url: '/pages/my/MyYilogin'
				});
				break;
				// #endif

				// #ifdef MP
			case 'my':
				uni.navigateTo({
					url: '/pages/my/MyYilogin'
				});
				break;
				// #endif
		}
	}
</script>

<style scoped>
	.tabbar-wrap {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		height: 100rpx;
		background: #fff;
		display: flex;
		align-items: center;
		justify-content: space-around;
		box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
		z-index: 999;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #999;
		font-size: 24rpx;
	}

	.tab-item .icon {
		width: 46rpx;
		height: 46rpx;
		margin-bottom: 6rpx;
	}

	/* 选中状态：文字颜色保持原有逻辑 */
	.tab-item.active {
		color: #2575fc;
	}

	.center-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: -40rpx;
	}

	.center-circle {
		width: 120rpx;
		height: 120rpx;
		border-radius: 60rpx;
		background: linear-gradient(180deg, #ff9f50, #ff6a3a);
		box-shadow: 0 10rpx 24rpx rgba(255, 106, 58, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.center-icon {
		width: 64rpx;
		height: 64rpx;
	}

	.center-text {
		margin-top: 6rpx;
		color: #999;
		font-size: 24rpx;
	}

	.center-text.active {
		color: #ff6a3a;
	}
</style>